<template>
	<view class="reportBody">

		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
			:up="upOption">

			<view class="list" v-for="(item,index) in list" :key="index">

				<view class="ItemView">
					<text class="ItemName">生产车间:</text>
					<text class="ItemContent">sdsdasd</text>
				</view>

				<view class="ItemView">
					<text class="ItemName">生产车间:</text>
					<text class="ItemContent">sdsdasd</text>
				</view>

				<view class="ItemView">
					<text class="ItemName">生产车间:</text>
					<text class="ItemContent">sdsdasd</text>
				</view>

			</view>

		</mescroll-body>




	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				list: [{}, {}, {}],
				// 下拉刷新的配置
				downOption: {
					auto: false,
					beforeEndDelay: 300
				},
				// 上拉加载的配置
				upOption: {
					auto: false,
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					},
					textNoMore: '没有更多数据了...',
					toTop: {
						offset: 1000 // 滚动多少才显示to-top 
					}
				},
			}
		},
		
		onShow() {
			setTimeout(()=>{
				//方法主动触发下拉刷新动画且请求第一页数据
				this.mescroll.triggerDownScroll();
			},500)
		},
		
		methods: {
			/*下拉刷新的回调*/
			downCallback() {
				// 下拉刷新和上拉加载调同样的接口,直接mescroll.resetUpScroll()即可
				setTimeout(() => {
					this.mescroll.resetUpScroll();
				}, 500)
			},

			/*上拉加载的回调*/
			upCallback(page) {
				this.mescroll.endBySize(0, 0);
				return;
				let obj = {
					page: page.num, // 页码, 默认1
					limit: page.size, // 页长, 默认10条
					category_id: this.gxFlData[this.showIndex].id
				};
				getCategoryVideoList(obj)
					.then(res => {
						if (res.code != 1) {
							this.mescroll.endBySize(0, 0);
							return;
						};
						if (res.data.length > 0) {
							// 接口返回的当前页数据列表 (数组)
							let curPageData = res.data;
							// 接口返回的当前页数据长度 
							let curPageLen = curPageData.length;
							// 接口返回的总数据量
							let totalSize = res.total;
							if (page.num == 1) this.videoList = []; //如果是第一页需手动置空列表
							this.videoList = this.videoList.concat(curPageData); //追加新数据
							// 请求成功,隐藏加载状态
							this.mescroll.endBySize(curPageLen, totalSize);
						} else {
							this.videoList = [];
							this.mescroll.endBySize(0, 0);
						}
					})
			},
		}
	}
</script>

<style scoped lang="scss">
	.reportBody {
		width: 100%;
		height: 100vh;
		background-color: #e4ecfb;
		padding-top: 5rpx;
	}

	.list {
		padding: 10rpx 0 25rpx;
		width: 720rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin: 10rpx 15rpx;
		background-color: white;
		border-radius: 10rpx;
		overflow: hidden;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	.ItemView {
		width: 350rpx;
		display: flex;
		margin-left: 10rpx;
		flex-direction: row;
		align-items: center;
		margin-top: 15rpx;
		background-color: white;
	}

	.ItemName {
		/* width:100rpx; */
		/* lines: 1;
		text-overflow: ellipsis; */
		font-size: 30rpx;
	}

	.ItemContent {
		width: 220rpx;
		// margin-left: 10rpx;
		font-size: 30rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>
